import React, { PureComponent } from 'react';
import {
  WrittingWrapper,
} from './style';
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
class Writing extends PureComponent{

  constructor(props) {
    super(props);
    this.state = {
      // 创建一个editorState区域, 设置编辑器初始化内容
      editorState: BraftEditor.createEditorState('<p>Welcome to the FriendShare Community</p>'),
      // outputHTML: '<p> </p>'
    }
  }
  componentDidMount() {
    this.isLiving = true;
    // 3s后更改编辑器内容
    // setTimeout(this.setEditorContentAsync, 3000);
  };

  componentWillUnmount() {
    this.isLiving = false;
  }

  handleChange = (editorState) => {
     // 避免直接在onChange直接toHTML，配合节流函数或者合适的时机更加切当
    // console.log(editorState.toHTML());
    this.setState({
      editorState,
      // outputHTML: editorState.toHTML()
    })
  };

  // setEditorContentAsync = () => {
  //   this.isLiving && this.setState({
  //     editorState: BraftEditor.createEditorState('<p>您好， <b>世界！</b></p>')
  //   })
  // };
  // 增加预览功能
  preview = () => {
    if (window.previewWindow) {
      window.previewWindow.close();
    }
    window.previewWindow = window.open();
    window.previewWindow.document.write(this.buildPreviewHtml());
    window.previewWindow.document.close();
  };

  buildPreviewHtml = () => {
    return `
      <!Doctype html>
      <html lang="">
        <head>
          <title>Preview Content</title>
          <style>
            html,body{
              height: 100%;
              margin: 0;
              padding: 0;
              overflow: auto;
              background-color: #f1f2f3;
            }
            .container{
              box-sizing: border-box;
              width: 1000px;
              max-width: 100%;
              min-height: 100%;
              margin: 0 auto;
              padding: 30px 20px;
              overflow: hidden;
              background-color: #fff;
              border-right: solid 1px #eee;
              border-left: solid 1px #eee;
            }
            .container img,
            .container audio,
            .container video{
              max-width: 100%;
              height: auto;
            }
            .container p{
              white-space: pre-wrap;
              min-height: 1em;
            }
            .container pre{
              padding: 15px;
              background-color: #f1f1f1;
              border-radius: 5px;
            }
            .container blockquote{
              margin: 0;
              padding: 15px;
              background-color: #f1f1f1;
              border-left: 3px solid #d1d1d1;
            }
          </style>
        </head>
        <body>
          <div class="container">${this.state.editorState.toHTML()}</div>
        </body>
      </html>
    `;
  };

  render() {
    const excludeControls = [
      'letter-spacing',
      'line-height',
      'clear',
      'headings',
      'list-ol',
      'list-ul',
      'remove-styles',
      'superscript',
      'subscript',
      'hr',
      'text-align'
    ];

    const extendControls = [
      {
        key: 'custom-button',
        type: 'button',
        text: '预览',
        onClick: this.preview
      }
    ];
    const { editorState } = this.state;
    const { isLogin } = this.props;

    if (isLogin) {
      return (
        <div className='main'>
          <WrittingWrapper>
            {/* excludeControls包括控件类型   extendControls包括扩展控件*/}
            <BraftEditor
              value={ editorState }
              onChange = { this.handleChange }
              excludeControls={excludeControls}
              extendControls={extendControls}
              contentStyle={{height: 400}}
            />
          </WrittingWrapper>
        </div>
      )
    } else {
      return (
        <Redirect to='/login' />
      )
    }
  }
}

const mapStateToProps = (state) => ({
  isLogin: state.login.login
});

const mapDispatchToProps = (dispatch) => ({

});

export default connect(mapStateToProps, mapDispatchToProps)(Writing);